<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<headassy title="客户列表" searchTitle="客户名称/客户手机号" :isTab="false" @goSearch="goSearch" @openSideBar="getAllSearch"></headassy>
	<view class="custom-content">
		<view class="nav-status text-orange">
			当前状态有{{count}}个客户
		</view>
		<scroll-view>
			<view class="card-list">
				<view class="card mt-5" v-for="item in pageList" :key="item.id">
					<view class="top u-flex-between">
						<view class="left u-flex">
							<view class="text-info ">
								客户名称: 
								<span style="margin-left: 14rpx;">{{item.name ? item.name : ''}}</span>
							</view>
						</view>
						<view class="right u-flex">
							<view class="cus-blue-tag">
								{{item.isLockingCodeReg ? '已锁定' : '未锁定'}}
							</view>
						</view>
					</view>
					<view class="center">
						<view class="title u-flex-between">
							<view class="title-left u-flex">
								客户识别码:
								<span style="margin-left: 14rpx;">{{item.uuid ? item.uuid : ''}}</span>
							</view>
							<view class="right u-flex">
								<view class="cus-blue-tag">
									{{item.level ? item.level : ''}}
								</view>
							</view>
						</view>
						<view class="text">
							绑定手机:
							<span style="margin-left: 14rpx;">{{item.phone ? item.phone : ''}}</span>
						</view>
						<view class="text">
							注册时间:
							<span style="margin-left: 14rpx;">{{item.cregisterDate ? item.cregisterDate : ''}}</span>
						</view>
						<view class="text">
							最后登录:
							<span style="margin-left: 14rpx;">{{item.lastLoginTime ? item.lastLoginTime : ''}}</span>
						</view>
					</view>
					<view class="down u-flex-content-end">
						<view class="right u-flex">
							<!-- <view class="cus-blue-btn" @click="editPas(item)" style="margin-right: 14rpx;">
								改密
							</view>
							<view class="cus-oragen-btn">
								编辑
							</view> -->
							<view class="cus-oragen-btn" @click="goDetail(item)">
								详情
							</view>
						</view>
					</view>
				</view>
				<view class="example-body">
					<uni-load-more :status="status" :content-text="contentText"/>
				</view>
			</view>
			
			<view class="popup">
				<u-popup :show="show" @close="close" mode="right">
					<view class="popup-content">
						<view class="top u-flex-between">
							<view class="left">
								筛选
							</view>
							<view class="right">
								<u-icon name="close" :bold="true" @click="show=false" size="42"></u-icon>
							</view>
						</view>
						<view class="" style="height: 100vh;overflow: auto;">
							<view class="item-box">
								<view class="item-title">
									全部等级
								</view>
								<view class="item">
									<view class="u-page__tag-item" v-for="(item, index) in tabs" :key="index">
										<u-tag :text="item.name" type="warning" :name="index" bgColor="#e5e5e5"
											borderColor="#e5e5e5" @click="radioClick(item,1)"
											:color="select.level===item.name?tagColor:defaultColor"
											:bgColor="select.level===item.name?tagBgColor:defaultBgColor">
											<!-- 	:color="select.status===item.name?tagColor:defaultColor"
											:bgColor="select.status===item.name?tagBgColor:defaultBgColor" -->
										</u-tag>
									</view>
								</view>
							</view>
							<!-- 全部类型 -->
							<view class="item-box">
								<view class="item-title">
									全部状态
								</view>
								<view class="item">
									<view class="u-page__tag-item" v-for="(item, index) in typeList2" :key="index">
										<u-tag :text="item.name" type="warning" :name="index" bgColor="#e5e5e5"
											:color="select.isLockingCodeReg===item.isLockingCodeReg?tagColor:defaultColor"
											:bgColor="select.isLockingCodeReg===item.isLockingCodeReg?tagBgColor:defaultBgColor"
											borderColor="#e5e5e5" @click="radioClick(item,2)">
											<!-- 	:color="select.status===item.name?tagColor:defaultColor"
											:bgColor="select.status===item.name?tagBgColor:defaultBgColor" -->
										</u-tag>
									</view>
								</view>
							</view>
							<!-- 全部编码 -->
							<view class="item-box">
								<view class="item-title">
									全部创建
								</view>
								<view class="item">
									<view class="u-page__tag-item" v-for="(item, index) in codeType" :key="index">
										<u-tag :text="item.name" type="warning" :name="index" bgColor="#e5e5e5"
											:color="select.ismanualCoding===item.ismanualCoding?tagColor:defaultColor"
											:bgColor="select.ismanualCoding===item.ismanualCoding?tagBgColor:defaultBgColor"
											borderColor="#e5e5e5" @click="radioClick(item,3)">
											<!-- 	:color="select.status===item.name?tagColor:defaultColor"
											:bgColor="select.status===item.name?tagBgColor:defaultBgColor" -->
										</u-tag>
									</view>
								</view>
							</view>
							<!-- 全部分类 -->
						</view>
						<view class="foot u-flex-between">
							<view class="left">
								<view class="cus-gray-btn"
									style="width: 98px;height: 35px;font-size: 14px;line-height: 35px;text-align: center;"
									@click="clearSelect">
									重置选择
								</view>
							</view>
							<view class="right">
								<view class="cus-oragen-btn"
									style="width: 98px;height: 35px;font-size: 14px;line-height: 35px;text-align: center;"
									@click="saveSelect">
									保存筛选
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</scroll-view>
		<!--  -->
		<view class="">
			<u-popup :show="show2" @close="close" :closeOnClickOverlay="true">
				<view>
					<view class="" style="padding: 50rpx 0;text-align: center;font-size: 36rpx;">
						修改客户密码
					</view>
					<view class="" style="">
						<view class="u-flex" style="padding: 28rpx 40rpx;">
							<u--form labelPosition="left" ref="uForm" style="width: 100%;">
								<u-form-item label="客户名称" ref="item1" labelWidth="200">
									<u--input border="none" disabled disabledColor="#f5f5f5" v-model="name"></u--input>
								</u-form-item>
								<u-form-item label="新的密码" ref="item1" labelWidth="200">
									<u--input border="none" v-model="form.password" type="password"></u--input>
								</u-form-item>
								<u-form-item label="确认密码" ref="item1" labelWidth="200">
									<u--input border="none" type="password" v-model="passWord2"></u--input>
								</u-form-item>
							</u--form>
						</view>
						<view class="u-flex" style="padding: 86rpx;">
							<view class="w-145">
								<button class="bg-red mr-5" style="color: #fff;border-radius: 4rpx;"
									@click="changePas()">确认</button>
							</view>
							<view class="w-145">
								<button @click="show2=false">取消</button>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!--  -->
		
		<!-- 侧边栏 -->
		<sidebarpop
			ref="page-sidebar"
			ptitle="筛选"
			isSlot="true"
			:height="(parseInt(system.safeArea.top) + 44)"
			:sidebarList="JSON.stringify(sidebarList)"
			@closeclick="closePop"
			@radioClick="radioClick"
			@clearSelect="clearSelect"
			@saveclick="saveSelect"
		>
		</sidebarpop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tabs: [{
				// 		name: '黄金',
				// 		disabled: false,
				// 		param: {
				// 			status: '黄金'
				// 		}
				// 	},
				// 	{
				// 		name: '钻石',
				// 		disabled: false,
				// 		param: {
				// 			status: '钻石'
				// 		}
				// 	},
				// 	{
				// 		name: '金牌',
				// 		disabled: false,
				// 		param: {
				// 			status: '金牌'
				// 		}
				// 	},
				// 	{
				// 		name: '白金',
				// 		disabled: false,
				// 		param: {
				// 			status: '白金'
				// 		}
				// 	},
				// 	{
				// 		name: '普通',
				// 		disabled: false,
				// 		param: {
				// 			status: '普通'
				// 		}
				// 	},
				// ],
				// data: {
				// 	pageNum: 1,
				// 	pageSize: 20,
				// 	input: '',
				// 	level: '',
				// 	ismanualCoding: '',
				// 	isLockingCodeReg: '',
				// 	proSort: '',
				// 	workSort: '',
				// 	type: 2
				// },
				// custAccId: '',
				// keyword: '',
				// count: '',
				// show: false,
				// show2: false,
				// typeList2: [{
				// 		name: '未锁定',
				// 		isLockingCodeReg: '0',
				// 		param: {
				// 			status: '未锁定'
				// 		}
				// 	},
				// 	{
				// 		name: '已锁定',
				// 		isLockingCodeReg: '1',
				// 		param: {
				// 			status: '已锁定'
				// 		}
				// 	}
				// ],
				// codeType: [{
				// 		name: '自动创建',
				// 		ismanualCoding: '0',
				// 		param: {
				// 			status: '自动创建'
				// 		}
				// 	},
				// 	{
				// 		name: '手动创建',
				// 		ismanualCoding: '1',
				// 		param: {
				// 			status: '手动创建'
				// 		}
				// 	}
				// ],
				// customList: [],
				// select: {
				// 	isLockingCodeReg: '',
				// 	ismanualCoding: '',
				// 	level: '',
				// },
				// tagBgColor: '#fd7400',
				// defaultBgColor: '#f5f5f5',
				// tagColor: '#fff',
				// defaultColor: '#000',
				// type: '正常状态',
				// type2: "锁定中",
				// acId: '',
				// form: {
				// 	custAccId: '',
				// 	id: '64366',
				// 	password: ''
				// },
				// passWord2: '',
				// name: '',
				
				
				page: {
					pageNum: 1,
					pageSize: "10",
					custAccId: '',		
				},
				data: {
					input: '',
					level: '',
					ismanualCoding: '',
					isLockingCodeReg: '',
					proSort: '',
					workSort: '',
					type: 1
				},
				typeList2: [],
				codeType: [],
				pageList: [],				// 页面数据
				count: '',
				// 侧边栏
				sidebarList: [],			// 侧边栏数据
				popShow: false,				// 弹窗触发时为true
				popShowName: '',			// 弹窗名称
				
				// 加载动作
				status: 'loading',			//上拉加载
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				
				popShow: false,			// 禁止穿透
				system: uni.getSystemInfoSync(),
			};
		},
		onLoad() {
			this.custAccId = uni.getStorageSync('custAccid');
			this.acId = uni.getStorageSync('acId');
			this.getPullRefresh()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		// 触底监听
		onReachBottom() {
			if(this.status != 'noMore') {
				return 
			}
			console.log('触底，列表分组总数:'+Math.ceil(this.count / 20),'当前列表:'+this.page.pageNum);
			if(this.page.pageNum < Math.ceil(this.count / 20)) {
				this.status = 'loading'
				this.page.pageNum++;
				this.getPageList('refresh');
			}else {
				this.status = 'noMore'
			}
		},
		methods: {
			// // 下拉刷新请求数据
			// getPullRefresh(){
			// 	console.clear()
				
			// 	this.get_CustomData()
				
			// },
			// loadMore() {
			// 	this.page.num++;
			// 	this.getCodeList()
			// },
			// async get_CustomData() {
			// 	const res = await uni.$api.custom.getCustom(this.custAccId, {
			// 		custAccId: 51,
			// 		...this.data,
			// 	})
			// 	this.customList = res.data
			// 	this.count = res.count
			// 	uni.stopPullDownRefresh()
			// },
			// // 获取所有筛选
			// getAllSearch() {
			// 	console.log(1)
			// 	this.show = true
			// },
			// close() {
			// 	this.show = false
			// },
			// radioClick(item, num) {
			// 	console.log(item, '点击了')
			// 	switch (num) {
			// 		case 1:
			// 			this.data.level = item.name
			// 			this.select.level = item.name
			// 			this.newParams = {}
			// 			break;
			// 		case 2:
			// 			this.data.isLockingCodeReg = item.isLockingCodeReg
			// 			this.select.isLockingCodeReg = item.isLockingCodeReg
			// 			this.newParams = {
			// 				...this.data
			// 			}
			// 			break;
			// 		case 3:
			// 			this.data.ismanualCoding = item.ismanualCoding
			// 			this.select.ismanualCoding = item.ismanualCoding
			// 			this.newParams = {
			// 				...this.data
			// 			}
			// 			break;
			// 		default:
			// 			break;
			// 	}
			// 	this.get_CustomData()
			// },
			// saveSelect() {
			// 	uni.setStorageSync('custom_select', this.select);
			// 	uni.setStorageSync('custom_data', this.data);
			// 	this.show = false
			// },
			// clearSelect() {
			// 	this.data = {
			// 			pageNum: 1,
			// 			pageSize: 20,
			// 			input: '',
			// 			level: '',
			// 			ismanualCoding: '',
			// 			isLockingCodeReg: '',
			// 			proSort: '',
			// 			workSort: '',
			// 			type: 2
			// 		},
			// 		this.select = {
			// 			isLockingCodeReg: '',
			// 			ismanualCoding: '',
			// 			level: '',
			// 		},
			// 		this.show = false
			// 	this.get_CustomData()
			// 	uni.removeStorageSync('custom_select');
			// 	uni.removeStorageSync('custom_data');
			// },
			// // 搜索
			// async goSearch() {
			// 	let vagueSearch = this.keyword
			// 	const res = await uni.$api.custom.searchCustom({
			// 		...this.data,
			// 		vagueSearch: vagueSearch
			// 	})
			// 	this.customList = res.data
			// 	this.count = res.count
			// 	console.log(res)
			// },
			// editPas(item) {
			// 	this.show2 = true
			// 	console.log(item)
			// 	this.name = item.name
			// },
			// close() {
			// 	this.show2 = false
			// },
			// async changePas() {
			// 	this.form.custAccId = this.custAccId
			// 	if (this.passWord2 != this.form.password) {
			// 		uni.showToast({
			// 			title: '请确保两次密码一致',
			// 		})
			// 		return
			// 	} else if (this.passWord2 == '' && this.form.password == '') {
			// 		uni.showToast({
			// 			title: '请输入密码',
			// 		})
			// 		return
			// 	} else {
			// 		const res = await uni.$api.custom.changePas(this.acId, {
			// 			...this.form
			// 		})
			// 		console.log(res)
			// 		uni.showToast({
			// 			title: res.msg
			// 		})
			// 		this.show2 = false
			// 	}
			// },
		
			
			// 前往详情页
			goDetail(item) {
				uni.navigateTo({
					url: '/pagesA/pages/custom/customdetail?id=' + item.id
				})
			},
			
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				setTimeout(()=>{
					uni.stopPullDownRefresh();
				}, 1500);
				this.page.pageNum = 1;
				this.getPageList();
				this.getSelectList();
			},
			
			async getPageList(type) {
				this.status = 'loading';
				if(type != 'refresh') {
					// 重新加载数据时可以看见变化
					this.pageList = [];
					this.count = 0;
				}
				const res = await uni.$api.custom.getCustom({
					...this.page,
					...this.data,
				})
				if(type == 'refresh') {
					this.pageList.push(...res.data);
				}else {
					this.pageList = res.data
				}
				this.status = 'noMore';
				this.count = res.coun ? res.coun : 0;
				uni.stopPullDownRefresh()
			},
			
			// 初始化侧边栏数据
			sidebarInit() {
				const sidebarLable = ['全部状态','全部创建'];
				const sidebarList = [this.typeList2,this.codeType];
				this.sidebarList = [];
				sidebarLable.forEach((val,index) => {
					this.sidebarList.push({
						selectEle: null,
						isShowList: false,
						title: val,
						isModelShow: true,
						data: this.handleSidebarData(sidebarList[index])
					});
				})
			},
			handleSidebarData(res = []) {
				let data = res;
				data.forEach(val => {
					val.ischeck = false;
					if(!val.title) {
						if(val.nameVal) {
							val.title = val.nameVal
						}
						if(val.name) {
							val.title = val.name
						}
					}
				})
				return data
			},
			// 获取搜索项列表
			getSelectList() {
				// 全部状态
				this.typeList2 = [
					{ischeck: false,title: '未锁定',value: '0'},
					{ischeck: false,title: '已锁定',value: '1'},
					{ischeck: false,title: '全部状态',value: ''},
				];
				//全部创建
				this.codeType = [
					{ischeck: false,title: '自动创建',value: '0'},
					{ischeck: false,title: '手动创建',value: '1'},
					{ischeck: false,title: '全部创建',value: ''},
				]
			},
			// 侧边栏模块标签点击
			radioClick(item,index,isRepeat) {
				console.log('侧边栏模块标签点击----',item,index,isRepeat)
				switch (index) {
					case 0:
						this.data.isLockingCodeReg = isRepeat ? '' : item.value;
						break;
					case 1:
						this.data.ismanualCoding = isRepeat ? '' : item.value;
						break;
				}
			},
			// 确认筛选
			saveSelect() {
				this.page.pageNum = 1;
				this.getPageList();
				this.closePop();
			},
			// 清除数据
			clearSelect() {
				Object.keys(this.data).forEach(key => {
					this.data[key] = key != 'serviceId' ? '' : 1
				})
			},
			
			// 搜索
			goSearch(e) {
				this.data.input = e;
				this.saveSelect();
			},
			
			// 打开侧边栏
			getAllSearch() {
				this.openModel('page-sidebar');
				this.sidebarInit();
			},
			// 新开弹窗
			openModel(ref) {
				if(this.$refs[ref]) {
					this.popShow = true;
					this.popShowName = ref;
					this.$refs[ref].pupshow = true;
				}
			},
			// 关闭弹窗
			closePop() {
				this.popShowName = '';
				this.popShow = false;
			},
		}
	}
</script>

<style lang="scss">
	// 去掉顶栏固定
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	// 去掉默认背景色
	/deep/.u-popup__content {
		background-color: transparent !important;
	}
	
	.custom-content {
		min-height: 100vh;
		background-color: $uni-bg-color-grey;

		.u-nav-slot {
			display: flex;
			align-items: center;
			background-color: #00000061;
			border: 1px solid;
		}

		.tabs {
			background-color: #fff;
			font-size: 28rpx;
		}

		.nav-status {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
		}


		.card-list {
			background: $uni-bg-color-grey;
			padding: 0 20rpx;

			.card {
				padding: 28rpx 32rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 28rpx;

				.top {
					border-bottom: solid 1px #f5f5f5;
					padding-bottom: 10px;

					.left {
						flex-direction: column;

						.text-info {
							font-size: 28rpx;
							font-weight: 700;
						}
					}
				}

				.center {
					padding-top: 10px;
					padding-bottom: 10px;

					.title {
						.title-left {
							font-size: 28rpx;
							color: gray;
						}

						.title-right {
							// font-size: 28rpx;
						}
					}

					.text {
						font-size: 28rpx;
						color: gray;
					}
				}

				.down {
					border-top: solid 1px #f5f5f5;
					padding-top: 12px;
				}
			}
		}

		.popup {
			.popup-content {
				margin-top: 0;
				float: right;
				width: 331px;
				padding: 0 16px;
				box-sizing: border-box;
				background: #fff;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				position: relative;
				height: 100vh;
				overflow: auto;

				.top {
					line-height: 150%;
					padding-top: 13px;
					padding-bottom: 9px;
					border-bottom: solid 1px #e5e5e5;
				}

				.item-box {
					.item-title {
						padding-top: 13px;
						font-size: 13px;
						font-weight: 700;
					}

					.item {
						display: flex;
						flex-wrap: wrap;
						padding-top: 9px;
						padding-bottom: 5px;
					}
				}

				.foot {
					padding: 22px 0;
					border-top: solid 1px #e5e5e5;
					position: fixed;
					width: 288px;
					bottom: 0;
					background-color: $uni-bg-color;
				}
			}
		}

		/deep/.u-popup__content {
			// border-top-left-radius: 10px;
			// border-bottom-left-radius: 10px;
		}

		.u-page__tag-item {
			width: calc(33.33% - 13px);
			margin-bottom: 13px;
			margin-right: 13px;
		}

		/deep/.u-tag--medium {
			display: flex;
			justify-content: center;
			height: 66rpx;
			word-wrap: break-word;
			overflow: hidden;
			background-color: #e5e5e5;
		}
	}
</style>